<template>
  <div class="box">
    <span class="home" @click="goHome">
      <i class="icon suncnui suncnui-icon-home"></i>
    </span>
    <!-- <span> 日常办公 </span>
    <i class="icon suncnui suncnui-icon-right"></i>
    <router-link to="">我的短信</router-link> -->
    <!-- <div>
      <span>提案征集</span>
      <i class="icon suncnui suncnui-icon-right"></i>
    </div>
    <div>
      <router-link to="">征集通知</router-link>
      <i class="icon suncnui suncnui-icon-right"></i>
    </div>
    <div>
      <router-link to="">新增</router-link>
    </div> -->
    <div v-for="(item, index) in breadCrumbList" :key="index">
      <span v-if="item.name == ''">{{ item.text }}</span>
      <router-link :to="item.name" v-else>{{ item.text }}</router-link>
      <i
        class="icon suncnui suncnui-icon-right"
        v-if="index + 1 !== breadCrumbList.length"
      ></i>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import meun from '@/router/meun'
export default {
  data() {
    return {
      meunData: [],
      breadCrumbList: []
    }
  },
  watch: {
    $route: 'init'
  },
  mounted() {
    this.getBreadCrumb(this.$route)
  },
  methods: {
    ...mapMutations({
      setIsShowSecondMenu: 'SET_ISSHOWSECONDMENU'
    }),
    init() {
      this.getBreadCrumb(this.$route)
    },
    //通过路由和菜单数据进行对比返回所在的路由信息
    getPathArr(router) {
      var routerArr = []
      meun().map((x) => {
        if (x.children) {
          x.children.filter((item) => {
            if (item.name == router) {
              var obj = {
                name: '',
                text: x.text
              }
              routerArr.push(obj)
              routerArr.push(item)
            }
          })
        } else {
          if (x.name == router) {
            var obj = {
              name: '',
              text: x.text
            }
            routerArr.push(obj)
          }
        }
      })
      return routerArr
    },
    //得到面包屑最终的数组数据
    getBreadCrumb(params) {
      var arr = this.getPathArr(params.path)
      if (arr.length == 0) {
        var index = params.path.lastIndexOf('/')
        var path = params.path.substring(0, index)
        arr = this.getPathArr(path)
        var obj = {
          text: params.name,
          name: params.path
        }
        arr.push(obj)
      }
      this.breadCrumbList = arr
    },
    goHome() {
      this.setIsShowSecondMenu(false)
      this.$router.push('/console/home')
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  display: inline-flex;
  justify-content: space-between;
  height: 38px;
  line-height: 38px;
  padding-left: 20px;
  div > i {
    margin-left: 12px;
    margin-right: 12px;
    font-size: 12px;
  }
  div > span {
    color: #56585c;
    font-size: 14px;
  }
  div > a {
    color: #56585c;
    font-size: 14px;
  }
  div > a:last-child {
    color: @link-hover-color;
  }
}
.home {
  padding-right: 18px;
  position: relative;
  color: #333;
  margin-right: 20px;
  cursor: pointer;
  &:hover {
    color: @link-hover-color;
  }
  &::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    background: #e0e0e0;
    height: 19px;
    top: 11px;
  }
  i {
    font-size: 20px;
  }
}
</style>